<template>
 <div class="wrapper">
    <myHeader class="header" :obj="myObj" @events="events"></myHeader>
    <div class="main">
      <mt-navbar v-model="selected" class="myNavbar">
        <mt-tab-item id="1" class="myNav">附近的</mt-tab-item>
        <mt-tab-item id="2" class="myNav">标签雷达</mt-tab-item>
        <mt-tab-item id="3" class="myNav">求见</mt-tab-item>
      </mt-navbar>
      <mt-tab-container class="container" v-model="selected">
        <mt-tab-container-item class="item item_0308"  id="1">
          <!-- 附近的 -->
          <personDate :personObj="personObj" @personClick="askSee"></personDate>
          <!-- 附近的 -->
        </mt-tab-container-item>
        <mt-tab-container-item class="radar_0308" style="height: 100%;" id="2">
          <!-- 标签雷达 -->
          <div class="radarWrap" ref="radarWrap">
            <div class="searchLabel">
              <h2>添加你想搜索的标签（最多6个）</h2>
              <div class="labels">
                <span class="label"><i class="icon_0308"></i>JAVAScript</span>
                <span class="label"><i class="icon_0308"></i>VUE</span>
                <span class="label"><i class="icon_0308"></i>nodeJS</span>
                <span class="label"><i class="icon_0308"></i>JAVA</span>
                <span class="label"><i class="icon_0308"></i>CSS3</span>
                <span class="label"><i class="icon_0308"></i>bootstart</span>
                <span @click="useWrap('searchVisible', true)" class="addLabel">添加标签+</span>
              </div>
              <h2>筛选结果：</h2>
              <div class="imgData_0308">
                <section class="filterWrap_0315">
                  <div class="filterIcon_0316"></div>
                  <p class="filterText_0315">暂无结果</p>
                </section>
                <section v-if="false" class="section_0308">
                  <div class="div_0308">
                    <div class="trapezoid trapezoid1">
                      <span class="span_0308 text_0308">匹配度16.7%</span>
                      <span class="span_0308 number_0308">200</span>
                    </div>
                    <div class="trapezoid trapezoid2">
                      <span class="span_0308 text_0308">匹配度33.3%</span>
                      <span class="span_0308 number_0308">120</span>
                    </div>
                    <div class="trapezoid trapezoid3">
                      <span class="span_0308 text_0308">匹配度50%</span>
                      <span class="span_0308 number_0308">60</span>
                    </div>
                    <div class="trapezoid trapezoid4">
                      <span class="span_0308 text_0308">匹配度66.7%</span>
                      <span class="span_0308 number_0308">20</span>
                    </div>
                    <div class="trapezoid trapezoid5">
                      <span class="span_0308 text_0308">匹配度83.3%</span>
                      <span class="span_0308 number_0308">15</span>
                    </div>
                    <div class="trapezoid trapezoid6">
                      <span class="span_0308 text_0308">匹配度100%</span>
                      <span class="span_0308 number_0308">5</span>
                    </div>
                    <div class="rangeWrap_0308">
                      <input type="range" class="range_0308" min="0" max="5" step="1" value="0">
                    </div>
                  </div>
                </section>
              </div>
              <button class="seach_0309" @click="showList()">开始搜索</button>
            </div>
            <div class="radarList_0308">
              <pull-refresh :next="refresh">
                <div slot="list">
                  <section class="list-item">
                    <personDate :personObj="personObj" @personClick="askSee"></personDate>
                  </section>
                </div>
              </pull-refresh>
            </div>
          </div>
          
          
          <!-- 标签雷达 -->
        </mt-tab-container-item>
        <mt-tab-container-item id="3">

          <!-- 求见 -->
          <div class="nearbyUL">
            <personDate :personObj="personObj" @personClick="askSee"></personDate>
            
          </div>
          <!-- 求见 -->
        </mt-tab-container-item>
      </mt-tab-container>
      <mt-popup class="btns" v-model="popup.popupVisible" position="right">
        <router-link to="/myExpert"><div class="first">我的行家</div></router-link>
        <router-link to="/question"><div>发布问题</div></router-link>
      </mt-popup>
      <mt-popup
        v-model="popup.searchVisible"
        position="center" class="addSearch_0315">
        <div class="searchWrap2_0315">
          <h2 class="searchTitle_0316">添加标签</h2>
          <input class="searchInput_0316" type="text">
          <div class="searchItem_0316">大保健</div>
          <div class="searchItem_0316">出门必备三件套</div>
          <div class="searchItem_0316">伟哥？</div>
        </div>
        <div class="searchBtn_0316">
          <button @click="useWrap('searchVisible', false)" class="btnL_0316">取消</button>
          <button @click="useWrap('searchVisible', false)" class="btnR_0316">确认</button>
        </div>
      </mt-popup>
    </div>
 </div>
 

</template>
<script>
import myHeader from './base/myHeader';
import pullRefresh from './base/pullRefresh';
import personDate from './base/personDate';
import { Popup } from 'mint-ui';
export default {
  data () {
    return {
      myObj: { // header 组件接收的数据
        type: 1,
        text: "行家"
      },
      popup:{
        popupVisible: false,
        searchVisible: false
      },
      selected: '1',
      personObj: {
        type: 2,
        index: 1,
        face:{
          url: 'http://img5.imgtn.bdimg.com/it/u=3101626293,2338566066&fm=27&gp=0.jpg',
          labels:['hr大神', '王者百名'],
          name: 'yasuo',
          info: '王者3000分亚索代练'
        },
        list:[
          {
            url: 'http://img1.imgtn.bdimg.com/it/u=3784498975,4187222554&fm=27&gp=0.jpg',
            info: '100元上黄金'
          },
          {
            url: 'http://img1.imgtn.bdimg.com/it/u=2538474283,3529762258&fm=27&gp=0.jpg',
            info: '300元上钻石'
          },
          {
            url: 'http://img3.imgtn.bdimg.com/it/u=3557187370,230171723&fm=27&gp=0.jpg',
            info: '1000元上超凡大师'
          }
        ]
      },
    }
  },
  created () {
    
  },
  methods: {
    events(i) { // 头部myHeader组件点击事件返回值（1、2、3、4）
      if(i == 1){ // 点击头像
      this.$router.push({path: '/person'})

      }else if(i == 4){ //点击弹层，（我的行家、发布问题）
        this.useWrap("popupVisible", true);
      }
    },
    refresh() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
           this.$refs.radarWrap.style.transform = 'translate3D(0px, 0px, 0px)';
          resolve()
        }, 1600)
      })
    },
    askSee(i, data){
      if(i == 0) {
        this.$router.push({path: '/personDetails'});
      }else if(i == 1) {
        this.$router.push({path: '/classRoomDetails'});
      }else if(i == 2) {
        this.$router.push({path: '/voice'});
      }
    },
    useWrap(str, bool){
      this.popup[str] = bool;
    },
    showList(){
      this.$refs.radarWrap.style.transform = 'translate3D(0px, -50%, 0px)';
    }
  },
  components: {
    myHeader,
    pullRefresh,
    personDate,
    Popup
  }

}

</script>

<style lang="less">
  .wrapper {
    height: 100%;
    width: 3.75rem;
    .main {
      width: 3.75rem;
      height: 100%;
      position: absolute;
      padding-top: .44rem;
      box-sizing: border-box;
      top: 0;
      left: 0;
      .addSearch_0315 {
         border-radius: .08rem;
         .searchBtn_0316 {
          width: 3.45rem;
          display: flex;
          justify-content: center;
         
          button {
            width: 1.7rem;
            height: .4rem;
            border: none;
             background: none!important;
            border-top: .01rem solid #E5E5E5;
            color: #39393D;
            font-size: .18rem;
            &.btnL_0316 {
              border-right: .01rem solid #E5E5E5;
            }
          }
         }
        .searchWrap2_0315 {
          width: 3.45rem;
          background: white;
          padding: .07rem .15rem 0;
          box-sizing: border-box;
          border-radius: .08rem;
          .searchItem_0316 {
            width: 100%;
            height: .42rem;
            display: flex;
            align-items: center;
            padding: .08rem 0;
            box-sizing: border-box;
            color: #828282;
            border-bottom: .01rem solid #E5E5E5;
            &:nth-last-child(1) {
              border-bottom: none;
              margin-bottom: 1rem;
            }
          }
          .searchInput_0316 {
            width: 3.13rem;
            height: .3rem;
            border: .01rem solid #D8D8D8;
            border-radius: .03rem;
            padding: 0 .12rem;
            box-sizing: border-box;
            margin: 0 auto;
            color: #828282;
          }
          .searchTitle_0316 {
            font-size: .18rem;
            height: .25rem;
            line-height: .25rem;
            color: #4A4A4A;
            text-align: center;
            font-weight: 500;
            margin-bottom: .13rem;
          }
        }
      }
      
      .container {
        padding-top: 1rem;
        height: 100%;
        width: 3.75rem;
        position: absolute;
        top: 0;
        box-sizing: border-box;
        .lists{
          height: 100%;
          .mint-loadmore-text {
            
          }
        }
        >div {
          height: 100%;
        }
        .item {
          padding-top: 1.01rem;
          height: 100%;
          width: 3.75rem;
          position: absolute;
          top: 0;
          box-sizing: border-box;
        }
        .item_0308 {
          overflow-y: auto;
        }
        .radar_0308 {
          height: 100%;
          position: relative;
          overflow: hidden;
          .radarWrap {
            width: 100%;
            height: 200%;
            position: absolute;
            left: 0;
            transition: ease .5s;
          }
        }
        .nearbyUL {
          padding-left: .14rem;
          padding-top: 1.01rem;
          height: 100%!important;
          width: 3.75rem;
          position: absolute;
          top: 0;
          box-sizing: border-box;
          overflow-y: auto;
          height: 1.73rem;
          
        }
        .searchLabel {
          overflow-y: auto;
          overflow-x: hidden;
          height: 50%;
          padding: 0 .14rem;
          .seach_0309 {
            display: block;
            width: 3.35rem;
            height: .47rem;
            border-radius: .05rem;
            background: #557AFF;
            border: none;
            color: white;
            font-size: .18rem;
            margin: 0 auto .6rem;

          }
          h2 {
            height: .2rem;
            line-height: .2rem;
            font-size: .16rem;
            color: #353535;
            .clear {
              color: #333;
              font-weight: 400;
              float: right;
            }
          }
          .imgData_0308 {
            padding-top: .1rem;
            height: 2.52rem;
            margin-bottom: .4rem;
            .filterWrap_0315 {
              .filterIcon_0316 {
                width: 1rem;
                height: 1rem;
                margin: 0 auto;
                background: url('../assets/img/expert/icon_sous@3x.png') center center;
                background-size: cover;
                background-repeat: no-repeat;
              }
              .filterText_0315 {
                font-size: .17rem;
                color: #828282;
                text-align: center;
                padding-top: .13rem;
              }

            }
            
            .section_0308 {
              height: 2.52rem;
              .div_0308 {
                width: 1.62rem;
                margin: 0 auto;
                display: flex;
                flex-wrap:wrap;
                justify-content: flex-end;
                position: relative;
                .rangeWrap_0308 {
                  width: 10px;
                  position: absolute;
                  bottom: .1rem;
                  left: 2rem;
                  display: block;
                  -webkit-appearance: none;
                  background-color: white;
                  width: .01rem;
                  height: 0.01rem;
                  border-radius: 5px;
                  margin: 0 auto;
                  outline: 0;
                  input[type="range"]::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    background-color: #000;
                    width: .3rem;;
                    height: .3rem;
                    border-radius: 50%;
                    // border: 2px solid white;
                    transition: 0.3s ease-in-out;
                  }
                  .range_0308{
                    transform-origin: left bottom;
                    transform: rotate(-90deg);
                    box-shadow:
                    0 1px 0 0px white,
                    0 1px 0 white inset,
                    0px 2px 10px 0px black inset,
                    1px 0px 2px white inset,
                    0 0px 1px white inset;
                    margin-top:.02rem;
                    background-color:white;
                    border-radius:.15rem;
                    width: 2.5rem;
                    -webkit-appearance:none;
                    height: .03rem;
                  }
                  input[type="range"]::-webkit-slider-thumb{
                    -webkit-appearance:none;
                    top:-.05rem;
                    height:.3rem;
                    width:.3rem;
                    transform:translateY(-.04rem);
                    border-radius: 50%;
                    box-shadow:0 -.01rem .01rem white inset;
                    background: url('../assets/img/my@3x.png') center center;
                    background-size: cover;
                    background-repeat: no-repeat;
                  }
                }
                .trapezoid{
                  height: 0rem;
                  border-left: .1rem solid transparent;
                  position: relative;
                  .span_0308 {
                    position: absolute;
                    z-index: 3;
                    display: block;
                    height: .22rem;
                    line-height: .22rem;
                    margin-top: -.3rem;
                  }
                  .text_0308 {
                    color: #39393D;
                    font-size: .12rem;
                    text-align: center;
                    width: .8rem;
                    margin-left: -.9rem;
                  }
                  .number_0308 {
                    color: white;
                    font-size: .18rem;
                    right: .2rem;
                  }
                }
                .trapezoid1 {
                  width: 1.52rem;
                  border-top: .42rem solid #D8D8D8;
                }
                .trapezoid2 {
                  width: 1.42rem;
                  border-top: .42rem solid #B9B9B9;
                }
                .trapezoid3 {
                  width: 1.32rem;
                  border-top: .42rem solid #A3A3A3;
                }
                .trapezoid4 {
                  width: 1.22rem;
                  border-top: .42rem solid #828282;
                }
                .trapezoid5 {
                  width: 1.12rem;
                  border-top: .42rem solid #616161;
                }
                .trapezoid6 {
                  width: 1.02rem;
                  border-top: .42rem solid #39393D;
                }
              }

            }
          }
          .labels {
            overflow: hidden;
            padding: .14rem 0 .2rem 0;
            span {
              display: block;
              float: left;
              text-align: center;
              padding: .07rem .1rem;
              margin: 0 .14rem .14rem 0;
              border: .04rem;
              border-radius: .04rem;
              font-size: .14rem;
              &.addLabel{
                background: #828282;
                color: white;
              }
              &.label{
                background: #39393D;
                color: white;
                position: relative;
                i.icon_0308 {
                  display: block;
                  width: .18rem;
                  height: .18rem;
                  top:-.05rem;
                  right: -.05rem;
                  position: absolute;
                  background: url('../assets/img/person/icon_cancel04@3x.png') center center;
                  background-size: cover;
                  background-repeat: no-repeat;
                }
              }
              &.oldLabel {
                background: #666;
                color: white;
              }
            }
            
          }
        }
        .radarList_0308 {
          width: 100%;
          height:50%;
        }
      }
      .btns {
        top: 1rem;
        width: 1.15rem;
        height: .9rem;
        border-radius: .03rem;
        background: white;
        div {
          height: .47rem;
          line-height: .47rem;
          text-align: center;
          color: #333;
          font-size: .16rem;
          &.first {
            border-bottom: .01rem solid #ccc;
          }
        }
        &:before{
        width:0;
        height:0;
        display:block;
        content:'';
        border-width:.06rem;
        border-style:solid;
        border-color: transparent transparent #fff transparent;
        position:absolute;
        right:.1rem;
        top:-.12rem;
      }
      }
    }
  }
</style>

<style>
.header {
  position: relative;
  z-index: 2;
}
.myNavbar {
  display: block;
  justify-content: space-around;
  overflow: hidden;
  padding: 0 .14rem;
  box-sizing: border-box;
  background: #FAFAFA;
  position: relative;
  z-index: 2;
}
.mint-navbar .myNav {
  display: block;
  width: .85rem;
  float: left;
  margin: 0 .15rem;
}
.mint-navbar .is-selected {
   border-bottom: 3px solid #557AFF!important;
}
.mint-navbar .myNav .mint-tab-item-label {
   font-size: .14rem;
}
.mint-navbar .is-selected .mint-tab-item-label {
   color: #557AFF;
   font-weight: 600;
   font-size: .14rem;
}
</style>